<template>
  <el-table :data="tableData" style="width: 100%" height="400">
    <el-table-column prop="clientName" width="80px" label="当事人">
      <template slot-scope="scope">
        <!-- <i class="el-icon-user"></i> -->
        <span style="margin-left: 5px">{{ scope.row.clientName }}</span>
      </template>
    </el-table-column>
    <!-- <el-table-column prop="clientGroup" min-width="80px" label="班组"></el-table-column> -->
    <!-- <el-table-column prop="clientOffice" min-width="100px" label="科室"></el-table-column> -->
    <el-table-column prop="eventTime" width="100px" label="时间">
      <template slot-scope="scope">
        <!-- <i class="el-icon-date"></i> -->
        <span style="margin-left: 5px">{{
          new Date(scope.row.eventTime.replace(/-/g, "/")).toLocaleDateString()
        }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="category" label="纠违类别" width="120px"></el-table-column>
    <el-table-column prop="item" label="纠违项目">
      <template slot-scope="scope">
        <el-popover
          placement="bottom"
          title="具体描述"
          width="300"
          trigger="hover"
          :content="scope.row.description"
        >
          <span slot="reference">
            <i class="el-icon-info"></i>
            <span style="margin-left: 5px">{{ scope.row.item }}</span>
          </span>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      prop="description"
      label="文字描述"
      min-width="500px"
      v-if="!lite"
    ></el-table-column>
    <el-table-column
      prop="userName"
      label="提交人"
      width="80px"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  props: ["client", "range"],
  computed: {
    source() {
      return this.$store.getters.summarySource;
    },
    tableData() {
      return this.fetchData();
    },
  },
  data() {
    return {
      lite: true,
    };
  },
  methods: {
    fetchData() {
      let data = [];
      if (this.client.length === 0) return data;
      for (let i = 0; i < this.source.length; i++) {
        if (this.source[i].clientName === this.client) {
          let time = new Date(
            this.source[i].eventTime.replace(/-/g, "/")
          ).getTime();
          if (
            time >= this.range.min.getTime() &&
            time <= this.range.max.getTime()
          ) {
            data.push(this.source[i]);
          }
        }
      }
      return data;
    },
  },
};
</script>
